<template>
  <div class="h-full flex relative">
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <div class="relative" ref="documentContainer">
        <div
          class="mx-auto my-4 max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12 flex flex-col">

          <div class="flex-grow">
            <h2 class="text-xl font-bold text-center mb-8">发展对象公示结果</h2>
            <div class="leading-relaxed indent-8 text-justify">
              根据《东北大学发展党员工作细则》关于发展对象公示制的有关规定，我支部于 {{ formattedStartDate }} 至 {{ formattedEndDate }} 对 {{ member.memberName }}
              同志拟确定为发展对象进行了公示。公示期内，未收到任何单位或个人的异议。该同志具备党员发展对象条件，程序符合学校相关规定，现提交支部大会讨论。
            </div>
          </div>

          <div id="section-signature" class="mt-8 flex-1 text-right ">
            <p>中共东北大学软件学院委员会</p>
            <p class="mt-2">{{ formattedSignatureDate }}</p>
          </div>

        </div>
      </div>
    </div>

    <div class="absolute top-4 right-4 w-64 z-10">
      <div class="p-4 rounded-lg shadow-md bg-gray-50/80 backdrop-blur-sm">
        <n-anchor :bound="500" :listen-to="scrollContainer" :offset-target="scrollContainer">
          <n-anchor-link title="落款时间" href="#section-signature" />
        </n-anchor>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { NAnchor, NAnchorLink } from 'naive-ui'

// --- 滚动和布局相关的 ref ---
const scrollContainer = ref(null)
const documentContainer = ref(null)

// --- Props 定义 ---
const props = defineProps({
  member: {
    type: Object,
    default: () => ({
      memberName: '×××', // 提供默认姓名
      developmentPublicity: {
        startDate: null,
        endDate: null,
        signatureDate: null
      }
    })
  },
})

// --- 日期格式化逻辑 ---

// 辅助函数，用于格式化日期或返回占位符
const formatDate = (dateString) => {
  if (!dateString) return '× 年 × 月 × 日'
  const [year, month, day] = dateString.split('-')
  return `${year} 年 ${month} 月 ${day} 日`
}

// 计算属性，用于格式化各个日期
const formattedStartDate = computed(() => formatDate(props.member?.developmentPublicity?.startDate))
const formattedEndDate = computed(() => formatDate(props.member?.developmentPublicity?.endDate))
const formattedSignatureDate = computed(() => formatDate(props.member?.developmentPublicity?.signatureDate))


// --- onMounted (生命周期钩子) ---
// 用于调试，检查滚动容器是否已正确挂载
onMounted(() => {
  console.log('滚动容器 (scrollContainer) 已挂载:', scrollContainer.value)
  if (scrollContainer.value) {
    scrollContainer.value.addEventListener('scroll', () => {
      // console.log('滚动事件触发') // 可按需取消注释以进行滚动调试
    })
  }
})
</script>

<style scoped>
/* 段落首行缩进 */
.indent-8 {
  text-indent: 2em;
}

/* 自定义滚动条样式 */
.flex-1::-webkit-scrollbar {
  width: 8px;
}

.flex-1::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.flex-1::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}

.flex-1::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>